今天我們要來給我們的「打磚塊」做一個首頁入口，讓整個流程更順暢。

Photo by Mike Lewis HeadSmart Media on Unsplash

創建首頁場景

我們為首頁設計一個 scene，並且在裡面加上文字與音效，也為他加上一個控制可以讓我們進入遊戲。

var menuBgMusic;
const menu = new Phaser.Class({
  Extends: Phaser.Scene,
  initialize: function menu() {
    Phaser.Scene.call(this, { key: "menu" });
  },
  preload: function () {
    this.load.audio("menu", "./assets/sound/menu.ogg");
    this.load.image("bg", "./assets/img/bg.png");
  },
  create: function () {
    menuBgMusic = this.sound.add("menu", { loop: true, delay: 0 });
    this.make.image({
      x: 400,
      y: 300,
      key: "bg",
      scale: { x: 0.75, y: 1 },
      add: true,
    });
    // 加入標題與控制說明
    this.add.text(250, 200, "打磚塊", { fontSize: "100px", color: "#0584f2" });
    this.add.text(290, 400, "Click anywhere to start");
    // 透過點擊進入遊戲場景
    this.input.once(
      "pointerdown",
      function (event) {
        menuBgMusic.stop();
        this.scene.start("stage");
      },
      this
    );
    // 播放背景音樂
    menuBgMusic.play();
  },
  update: function () {}
});

設定多個場景

我們可以在 config 裡面放入多個場景，預設會先顯示第一個場景，之後可以透夠調用開啟其他場景。

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  audio: {
    disableWebAudio: true,
  },
  physics: {
    default: "arcade",
    arcade: {
      gravity: {},
      debug: false,
    },
  },
  scene: [menu, stage]
};

控制回到首頁

遊戲結束時，加入控制提示文字，讓使用者可以回到首頁再重新開始遊戲。

    ...
    
    gameOverContent = this.add.text(265, 350, "Press shift to go back to Menu");
    gameOverContent.visible = false;
    ...
    
    
    if (life === 0) {
      isGameStart = false;
      isGameOver = true;
      gameStartText.visible = false;
      gameOverText.visible = true;
      gameOverContent.visible = true;
      if (cursors.shift.isDown) {
        gameStartText.visible = false;
        gameOverText.visible = false;
        gameOverContent.visible = false;
        isGameStart = false;
        speed = 160;
        direction = 1;
        life = 3;
        isGameOver = false;
        this.scene.start("menu");
      }
    }

就可以看到我們首頁，以及結束的時候提示畫面囉！

總結

我們終於完成我們的「打磚塊」了～太開心了！！歡呼！！
懷舊的遊戲最對味了，好久沒有看到這麼復古的遊戲了
YA!!!!!!!!!!

tags: Phaser Game 2020鐵人賽